How prefill/preload images in uppy.io library - laravel

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.

Answer 1

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