diff --git a/packages/js/product-editor/changelog/add-41510 b/packages/js/product-editor/changelog/add-41510
new file mode 100644
index 00000000000..b7742945d27
--- /dev/null
+++ b/packages/js/product-editor/changelog/add-41510
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+append a unique string to the filename if the settings are configured to do so
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/downloads-menu/downloads-menu.tsx b/packages/js/product-editor/src/blocks/product-fields/downloads/downloads-menu/downloads-menu.tsx
index 00a37c0d65f..8ebf9207a5a 100644
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/downloads-menu/downloads-menu.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/downloads/downloads-menu/downloads-menu.tsx
@@ -10,13 +10,11 @@ import { chevronDown, chevronUp } from '@wordpress/icons';
* Internal dependencies
*/
import { DownloadsMenuProps } from './types';
-import { UploadFilesMenuItem } from '../upload-files-menu-item';
import { MediaLibraryMenuItem } from '../media-library-menu-item';
import { InsertUrlMenuItem } from '../insert-url-menu-item';
export function DownloadsMenu( {
allowedTypes,
- maxUploadFileSize,
onUploadSuccess,
onUploadError,
}: DownloadsMenuProps ) {
@@ -38,16 +36,6 @@ export function DownloadsMenu( {
renderContent={ ( { onClose } ) => (
- {
- onUploadSuccess( files );
- onClose();
- } }
- onUploadError={ onUploadError }
- />
-
{
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/edit-downloads-modal.tsx b/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/edit-downloads-modal.tsx
index 71e3b9f122a..4a917d2c126 100644
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/edit-downloads-modal.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/downloads/edit-downloads-modal/edit-downloads-modal.tsx
@@ -1,17 +1,14 @@
/**
* External dependencies
*/
-import { ChangeEvent } from 'react';
import { __, sprintf } from '@wordpress/i18n';
import { createElement, useState } from '@wordpress/element';
import { trash } from '@wordpress/icons';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
import { recordEvent } from '@woocommerce/tracks';
import { ImageGallery, ImageGalleryItem } from '@woocommerce/components';
-import { uploadMedia } from '@wordpress/media-utils';
import {
Button,
- FormFileUpload,
Modal,
BaseControl,
// @ts-expect-error `__experimentalInputControl` does exist.
@@ -34,28 +31,14 @@ export interface Image {
export const EditDownloadsModal: React.FC< EditDownloadsModalProps > = ( {
downloableItem,
- maxUploadFileSize = 10000000,
onCancel,
onChange,
onRemove,
onSave,
- onUploadSuccess,
- onUploadError,
} ) => {
const { createNotice } = useDispatch( 'core/notices' );
const [ isCopingToClipboard, setIsCopingToClipboard ] =
useState< boolean >( false );
- const [ isFileUploading, setIsFileUploading ] =
- useState< boolean >( false );
-
- const { allowedMimeTypes } = useSelect( ( select ) => {
- const { getEditorSettings } = select( 'core/editor' );
- return getEditorSettings();
- } );
-
- const allowedTypes = allowedMimeTypes
- ? Object.values( allowedMimeTypes )
- : [];
const { id = 0, file = '', name = '' } = downloableItem;
@@ -96,21 +79,6 @@ export const EditDownloadsModal: React.FC< EditDownloadsModalProps > = ( {
setIsCopingToClipboard( false );
}
- async function handleFormFileUploadChange(
- event: ChangeEvent< HTMLInputElement >
- ) {
- setIsFileUploading( true );
- const filesList = event.currentTarget.files as FileList;
- await uploadMedia( {
- allowedTypes,
- filesList,
- maxUploadFileSize,
- onFileChange: onUploadSuccess,
- onError: onUploadError,
- } );
- setIsFileUploading( false );
- }
-
return (
= ( {
) }
- (
-
-
{ name }
-
-
- ) }
- />
+
+
-
-
-
- { createInterpolateElement(
- __(
- 'Supported file types: and more. View all',
- 'woocommerce'
- ),
- {
- Types: (
-
- PNG, JPG, PDF, PPT, DOC,
- MP3, MP4
-
- ),
- link: (
- // eslint-disable-next-line jsx-a11y/anchor-has-content
-
- event.stopPropagation()
- }
- />
- ),
- }
- ) }
-
-
- ) : (
- ''
- )
- }
- buttonText=""
- allowedMediaTypes={ allowedTypes }
- multipleSelect={ 'add' }
- onUpload={ handleFileUpload }
- onFileUploadChange={ handleFileUpload }
- onError={ handleUploadError }
- />
+ { ! Boolean( downloads.length ) && (
+
+
+ { createInterpolateElement(
+ __(
+ 'Supported file types: and more. View all',
+ 'woocommerce'
+ ),
+ {
+ Types: (
+
+ PNG, JPG, PDF, PPT, DOC, MP3, MP4
+
+ ),
+ link: (
+ // eslint-disable-next-line jsx-a11y/anchor-has-content
+
+ event.stopPropagation()
+ }
+ />
+ ),
+ }
+ ) }
+
+
+ ) }
{ Boolean( downloads.length ) && (
diff --git a/packages/js/product-editor/src/blocks/product-fields/downloads/media-library-menu-item/media-library-menu-item.tsx b/packages/js/product-editor/src/blocks/product-fields/downloads/media-library-menu-item/media-library-menu-item.tsx
index 80dd80a6426..9378c513b5e 100644
--- a/packages/js/product-editor/src/blocks/product-fields/downloads/media-library-menu-item/media-library-menu-item.tsx
+++ b/packages/js/product-editor/src/blocks/product-fields/downloads/media-library-menu-item/media-library-menu-item.tsx
@@ -1,17 +1,17 @@
/**
* External dependencies
*/
-
import { MenuItem } from '@wordpress/components';
import { createElement, useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { media } from '@wordpress/icons';
-import { MediaItem, MediaUpload } from '@wordpress/media-utils';
+import { MediaItem } from '@wordpress/media-utils';
/**
* Internal dependencies
*/
import { MediaLibraryMenuItemProps } from './types';
+import { MediaLibrary } from '../media-library';
const MODAL_CLASS_NAME =
'woocommerce-media-library-menu-item__upload_files_modal';
@@ -39,8 +39,8 @@ export function MediaLibraryMenuItem( {
[ uploadFilesModalOpen ]
);
- function handleMediaUploadSelect( value: unknown ) {
- onUploadSuccess( value as MediaItem[] );
+ function handleMediaUploadSelect( value: MediaItem[] ) {
+ onUploadSuccess( value );
}
function uploadFilesClickHandler( openMediaUploadModal: () => void ) {
@@ -51,13 +51,16 @@ export function MediaLibraryMenuItem( {
}
return (
- (
+ multiple="add"
+ uploaderParams={ {
+ type: 'downloadable_product',
+ } }
+ onSelect={ handleMediaUploadSelect }
+ >
+ { ( { open } ) => (