How prefill/preload images in uppy.io library

Question

I have an article post service, which has an upload form with uppy.io

Everything works great, but I need to edit those articles and their linked images.

How can I prefill already uploaded images to the uppy.io DashBoard?

My actual code:

<div class="DashboardContainer"></div>

<!-- AJAX Uploading for Add Post -->
<script src="https://transloadit.edgly.net/releases/uppy/v1.8.0/uppy.min.js"></script>
<script src="https://transloadit.edgly.net/releases/uppy/locales/v1.11.0/es_ES.min.js"></script>
<script>
    const uppy = Uppy.Core({
            debug: true,
            autoProceed: true,
            restrictions: {
                maxFileSize: 600000,
                maxNumberOfFiles: 10,
                minNumberOfFiles: 1,
                allowedFileTypes: ['.jpg', '.jpeg', '.png', '.gif']
            },
            locale: Uppy.locales.es_ES
        })
        .use(Uppy.Dashboard, {
            inline: true,
            target: '.DashboardContainer',
            replaceTargetContent: true,
            showProgressDetails: true,
            note: 'Sólo imágenes, hasta 10 fotos, de no más de 800kb',
            height: 350,
            width: '100%',
            metaFields: [{
                    id: 'name',
                    name: 'Name',
                    placeholder: 'Nombre del fichero subido'
                },
                {
                    id: 'caption',
                    name: 'Caption',
                    placeholder: 'Describe la imagen que estás subiendo'
                }
            ],
            browserBackButtonClose: true,
            plugins: ['Webcam']
        })
        .use(Uppy.XHRUpload, {
            endpoint: "{{ route('save-image-ajax') }}",
            formData: true,
            fieldName: 'files[]',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="token"]').attr('content')
            },
        })
    uppy.on('upload-success', (file, response) => {
        response.status // HTTP status code
        response.body // extracted response data
        // do something with file and response
        $('<input>', {
            type: 'hidden',
            name: 'imageID[]',
            value: response.body.imageID
        }).appendTo("#add");
    })
    uppy.on('complete', result => {
        console.log('successful files:', result.successful)
        console.log('failed files:', result.failed)
    })
</script>

The form works great for publishing an article, I just want to edit them, even the linked images.

No man, no yet, had to do it with custom div above and jquery for delete resources. — Erich García, May 17 '20 at 21:21

score 3 · Answer 1 · answered Jan 14 '21 at 01:34

You can prefill images from url (first converting the remote image into blob):

fetch({{your_image_url}})
.then((response) => response.blob())
.then((blob) => {
  uppy.addFile({
    name: "image.jpg",
    type: blob.type,
    data: blob
  });
});

And then, set the state of the loaded images to "Completed" to avoid Uppy re upload them:

uppy.getFiles().forEach(file => {
  uppy.setFileState(file.id, { 
    progress: { uploadComplete: true, uploadStarted: false } 
  })
})

Also, the property "autoProceed" must be false in the Uppy object configuration.

Source: https://github.com/transloadit/uppy/issues/1112#issuecomment-432339569

How prefill/preload images in uppy.io library

1 Answers1