jeudi 19 mars 2020

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

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: '',
        })

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">



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire