vue-dropzone
vue-dropzone copied to clipboard
rowanwins
Cannot display images correctly using manuallyAddFile()
I am trying to display images using the manuallyAddFile() method. However, I could not display the images for some reason. Here are my codes: Do Note that I am passing in a base64URL Is that the cause of this issue?
dropOptions: {
url: "https://httpbin.org/post",
acceptedFiles: "image/*",
// maxFiles: 1,
addRemoveLinks: true,
autoProcessQueue: false,
thumbnailWidth: 160,
thumbnailHeight: 160
}
setTimeout(() => {
this.form.varient.files.forEach(eachFile => {
var file = {
size: eachFile.size,
name: eachFile.name,
type: eachFile.type
};
this.$refs.myVueDropzone.manuallyAddFile(file, eachFile.dataURL);
});
}, 0);
Hi @NeoTianHow
Yes I suspect the base64url is the cause of the issue. If you look at these lines you will see that we attempt some basic validation before creating a thumbnail.
Also please don't tag people on issues unnecessarily - it is not their job (particularly if they aren't maintainers) to provide you with support within 15 minutes of the issue being posted.
Hi, @rowanwins Thanks for the reply! I am sorry for tagging you, my apologies. If base64URL does not work, is there a way to display the image using a file object? Just to give you more context, whenever a user decides to upload a photo in the dropzone, I used the @vdropzone-file-added event listener to receive the user-upload file. I will then add the file into a list. Right now, I want to display the images whenever the user revisits the dropzone. I have the file object, how can I display it?
I have the same issues, Does my url wrongly submitted?
let mockFile: any = {
name: ${imageObject.id}_${
imageObject.source
.split('/')
.pop()
.split('#')[0]
.split('?')[0]
},
id: imageObject.id,
accepted: true,
kind: 'image',
status: 'fetched',
type: 'image/jpeg',
upload: {
filename: imageObject.source
.split('/')
.pop()
.split('#')[0]
.split('?')[0]
}
}
;(this.$refs as any).images.manuallyAddFile(
mockFile,
imageObject.source // https://some.site/images/products/831621/5tKVv5j3LTXcogJhuMW8esO7nvktXMwoIvOYLvqM.png,
() => {
console.log('Callback')
},
null,
{
dontSubstractMaxFiles: true,
addToFiles: true
}
)
})
`
@NeoTianHow hey sorry for the tag as this issue likely not progressing.. Did you by any chance already solving this issue?
In addition to extensions ("fileUrl.indexOf(".jpg")") user might need to supply files without extensions (eg. server side is rendering the image with permission checks) or as base64.
For me, I am using manuallyAddFile with type: "image/jpeg" and without file extension. Could the script just check if the defined type matches image/* or kind: 'image' or something like that - when there is no extension?
For now, I did solve it via manuallyAddFile(Object, /dynamic/filepath#.jpg) - with #.jpg it assumes it to be an image and server loads it as supposed.
