New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix fileName is not respected when the image is uploaded via drag&dropped #6960

Merged
merged 1 commit into from May 29, 2018

Conversation

Projects
None yet
3 participants
@jorgefilipecosta
Member

jorgefilipecosta commented May 25, 2018

Contrary to all the other uploads we have, when uploading an image to the editor via drag&drop without an image block previously created the file name of the image we upload is not respect.

The fileName is now passed from the transform to the region where we upload via the alt attribute. Url is being used to store the blob and if we append '?fileName='or change it in another way the browsers start ignoring the blob URL. Given that we pass the file via URL attribute from the transform to the upload code, passing the fileName in the alt attribute seems the most logical way.

I think respecting file names is the expected behavior and will be important to correctly show upload error messages for drag&drop without previously created images.

How has this been tested?

Upload an image via drag&drop to the editor without previously creating an image block.
Go to the code editor and verify in the image URL that the file name was respected.

Fix fileName not respect when the image is drag&dropped
Contrary to all the other uploads we have, when uploading an image to the editor via drag&drop without an image block previously created the file name of the image we upload is not respect.

The fileName is now passed from the transform to the region where we upload via the al attribute. using the alt attribute seems the best approach because using the URL attribute is not possible. Url is being used to store the blob and if we change like append '?fileName=' the browsers start ignoring the blob URL. Given that we pass the file via URL attribute from the transform to the upload code passing the fileName in the alt attribute seems the most logical way.

@jorgefilipecosta jorgefilipecosta self-assigned this May 25, 2018

@jorgefilipecosta jorgefilipecosta requested a review from WordPress/gutenberg-core May 28, 2018

@tofumatt

Works for me. It worked in MacOS in Firefox and Safari for me, and I tested it successfully in Windows 10 with Chrome.

Tried to test Edge but my drag+drop wasn't working there. Maybe it doesn't work in Edge 🤷‍♂️

Anyway, looks good.

@jorgefilipecosta jorgefilipecosta merged commit 8e7682b into master May 29, 2018

2 checks passed

codecov/project 46.29% (+<.01%) compared to 1e689af
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@jorgefilipecosta jorgefilipecosta deleted the fix/uploading-an-image-via-drag-drop-unutilized-filename branch May 29, 2018

@jorgefilipecosta jorgefilipecosta added this to the 3.0 milestone May 30, 2018

@iseulde

This comment has been minimized.

Member

iseulde commented Jun 5, 2018

I'm getting errors since this change when copy pasting images.

edit.js:82 Uncaught (in promise) TypeError: Cannot assign to read only property 'name' of object '#<File>'
    at edit.js:82
@iseulde

This comment has been minimized.

Member

iseulde commented Jun 5, 2018

I'm redoing this so it's built in the blob package.

@jorgefilipecosta

This comment has been minimized.

Member

jorgefilipecosta commented Jun 5, 2018

Not certain why the file.name property is readonly on copy pastes and writable in the other cases, I'm investigating that.

@iseulde iseulde referenced this pull request Jun 5, 2018

Merged

Fix file paste: cache file info #7156

0 of 4 tasks complete
@jorgefilipecosta

This comment has been minimized.

Member

jorgefilipecosta commented Jun 5, 2018

Thank you a lot for catching this problem and for the fix @iseulde!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment