xenial-black•2y ago

Preview Image on edit page load

Hi ! how do in ensure that when I go to my edit page, it shows image on my Upload component ? When I upload a file it does show it, but I also want to show it when I first load it, currently, its just showing me the blue icon css -> antd upload multipart form

5 Replies

refine-support-bot•2y ago

Hey, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and could not find an answer. Please wait for someone from the refine core team or the community to try to help you. 👊

exotic-emerald•2y ago

Hi, https://ant.design/components/upload#components-upload-demo-picture-card i gues this is exactly what you want

xenial-black•2y ago

thank you, I will give it a shot if everything works will close this issue

exotic-emerald•2y ago

it can also remain for reference to others. it doesn't matter. your choice 👍

xenial-black•2y ago

sure, I will then keep it just to add more context to this, I was uploading image with content-type: multipart/formdata, so firstly for my Create view, I was getting undefined for my coverImage Form.Item field, but once I changed the Form.Item name from camel case to all lowercaps coverimage I was able to retrieve it my custom handleOnfinish function for the Create view Now going back to this question of the thread, with AntdD Upload component, on EDIT page I was unable make my already present image File list, show image in the thumbnail of the Upload file list, everything was working fine, but just as shown in the picture in the question, it wasn't rendering the image. I figured out that the way to resolve this was to set the Upload isImageUrl prop

isImageUrl={file => file?.url}

isImageUrl={file => file?.url}

Hope, this helps whoever stumbles across it