How to assign (use) input name to Uppy uploader when we have multiple uppy uploader

Question

I am trying to use Uppy to upload some images in my Laravel application. I need multiple uppy elements in one page that each one upload one specific image. For example Uppy1 for upload Nationality Card image and Uppy2 for upload Drive Licence image. I use below code for upload images.

<script>
        const Dashboard = Uppy.Dashboard;
        const XHRUpload = Uppy.XHRUpload;

        var cls = '.kt_uppy';
        var options = {
            proudlyDisplayPoweredByUppy: false,
            target: id,
            inline: true,
            resultName: 'uppyResult',
            replaceTargetContent: true,
            showProgressDetails: true,
            note: null,
            height: 170,
            metaFields: [
                { id: 'name', name: 'Name', placeholder: 'file name' },
                { id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }
            ],
            browserBackButtonClose: true,
        }

        var uppyDashboard = Uppy.Core({
            autoProceed: true,
            restrictions: {
                maxFileSize: 1000000, // 1mb
                maxNumberOfFiles: 1,
                minNumberOfFiles: 1
            }
        });

        uppyDashboard.use(Dashboard, options);
        uppyDashboard.use(XHRUpload, {
            endpoint: '{{ route('upload') }}',
        })

Problems:

1 - Can we use and init multiple uppy elements just with write one code? (above code) because number of persons that I need to get informations are Flexible. For ex: one family have 1 child and other family have 3 children and number of Nationality Card to upload is flexible

2 - How to assign different name attribute to each uppy element? like: <input type="file" name"name1"> and <input type="file" name"name2">

score 1 · Answer 1 · answered May 13 '20 at 08:55

you can use Uppy id options

you set id options in Uppy instance

then, you can control each Uppy instance separately

So, there are two ways for setting id

const uppy = Uppy({id: 'new id'})

const uppy = Uppy()

uppy.setOptions({id: 'new id'})

so edit your code like below example

   var uppyDashboard = Uppy.Core({
            autoProceed: true,
            restrictions: {
                maxFileSize: 1000000, // 1mb
                maxNumberOfFiles: 1,
                minNumberOfFiles: 1
            }
        });
        
   
      var uppyOneDashboard = Uppy.Core({
            id: 'id 1',
            autoProceed: true,
            restrictions: {
                maxFileSize: 1000000, // 1mb
                maxNumberOfFiles: 1,
                minNumberOfFiles: 1
            }
        });
        
    var uppyTwoDashboard = Uppy.Core({
            id: 'id 2',
            autoProceed: true,
            restrictions: {
                maxFileSize: 1000000, // 1mb
                maxNumberOfFiles: 1,
                minNumberOfFiles: 1
            }
        });

then, you have two separate Uppy instances

good luck

How to assign (use) input name to Uppy uploader when we have multiple uppy uploader

1 Answers1