We have integrated filestack-js to our react js project. When file picker popup to select files is opened, the close button at the top right corner overlaps with filter field to the left of it.
Expected Behavior
The Close button on the popup should not overlap with filter field
Current Behavior
The Close button is overlapping with the filter field
Possible Solution
Steps to Reproduce (for bugs)
Integrate filestack as per the documentation.
Invoke filestack popup for file upload
Choose a file to upload
In the popup, the UI is shown with close button overlapped with the filter field. Attached a screen shot.
We have integrated filestack-js to our react js project. When file picker popup to select files is opened, the close button at the top right corner overlaps with filter field to the left of it.
Expected Behavior
The Close button on the popup should not overlap with filter field
Current Behavior
The Close button is overlapping with the filter field
Possible Solution
Steps to Reproduce (for bugs)
Code for integration:
static uploadProject(uploadCallback, errorCallback) { const client = filestack.init('KEY'); const options = { fromSources: ['local_file_system'], maxFiles: 1, accept: ['video/mp4', 'video/quicktime', 'video/x-msvideo'], storeTo: { location: 's3', }, uploadConfig: { retry: 5, timeout: 60000 }, onFileSelected: (file) => { console.log(TAG + ' onFileSelected: ', file) if (file.size > 5 1000 1000 * 1000) { return Promise.reject('File size exceeds 5GB limit') } }, acceptFn: (file, options) => { return options.mimeFromMagicBytes(file.originalFile).then((res) => { const mimeFromMagicBytes = res const mimeTypeFromExtn = options.mimeFromExtension(file.originalFile.name) console.log('res', res, mimeTypeFromExtn); if (options.accept && options.accept.length > 0) { if (!(options.accept.includes(mimeFromMagicBytes) || options.accept.includes(mimeTypeFromExtn))) { return Promise.reject('Supported file formats are .mp4, .mov and .avi') } } }); }, onUploadStarted: () => { console.log(TAG + ' Upload Started') }, onFileUploadProgress: (data, event) => { console.log(TAG + ' onFileUploadProgress' + event.totalBytes + ' ' + event.totalPercent) }, onClose: (data) => { console.log(TAG + ' onClose', data) }, onUploadDone: (uploadResponse) => { console.log(TAG + ' onUploadDone', uploadResponse) uploadCallback(uploadResponse) }, onFileUploadFailed: (pickerFileMetadata, error) => { errorCallback(pickerFileMetadata, error) } }; client.picker(options).open(); }
Additional Screenshots
Context
Your Environment