@wordpress/components/build/form-file-upload/index.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.FormFileUpload = FormFileUpload;
exports.default = void 0;
var _element = require("@wordpress/element");
var _button = _interopRequireDefault(require("../button"));
var _deprecated36pxSize = require("../utils/deprecated-36px-size");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 * FormFileUpload allows users to select files from their local device.
 *
 * ```jsx
 * import { FormFileUpload } from '@wordpress/components';
 *
 * const MyFormFileUpload = () => (
 *   <FormFileUpload
 *     __next40pxDefaultSize
 *     accept="image/*"
 *     onChange={ ( event ) => console.log( event.currentTarget.files ) }
 *   >
 *     Upload
 *   </FormFileUpload>
 * );
 * ```
 */
function FormFileUpload({
  accept,
  children,
  multiple = false,
  onChange,
  onClick,
  render,
  ...props
}) {
  const ref = (0, _element.useRef)(null);
  const openFileDialog = () => {
    ref.current?.click();
  };
  if (!render) {
    (0, _deprecated36pxSize.maybeWarnDeprecated36pxSize)({
      componentName: 'FormFileUpload',
      __next40pxDefaultSize: props.__next40pxDefaultSize,
      // @ts-expect-error - We don't "officially" support all Button props but this likely happens.
      size: props.size
    });
  }
  const ui = render ? render({
    openFileDialog
  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
    onClick: openFileDialog,
    ...props,
    children: children
  });

  // iOS browsers may not reliably handle 'audio/*' in the accept attribute.
  // Adding explicit audio MIME types improves compatibility across all devices.
  const compatAccept = accept?.includes('audio/*') ? `${accept}, audio/mp3, audio/x-m4a, audio/x-m4b, audio/x-m4p, audio/x-wav, audio/webm` : accept;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "components-form-file-upload",
    children: [ui, /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
      type: "file",
      ref: ref,
      multiple: multiple,
      style: {
        display: 'none'
      },
      accept: compatAccept,
      onChange: onChange,
      onClick: onClick,
      "data-testid": "form-file-upload-input"
    })]
  });
}
var _default = exports.default = FormFileUpload;
//# sourceMappingURL=index.js.map