Blank Content-Type set for uploaded assets in S3

[francisli]

Nature of issue?

• Found a bug
• Existing feature enhancement
• New feature request

Details about the bug:

Firefox 57.0.1/macOS 10.13.1

• open the editor, sign in to an account
• open the sidebar for a sketch, open the new file modal
• drag-and-drop a file (i.e. a .jpg image) and let it finish uploading
• in the AWS S3 console, or by using a curl -I on the asset url, observe that the Content-Type is blank
• if you have the network inspector open while uploading, you'll see that the Content-Type field in the POST to S3 is blank

[dhruvdutt]

@francisli I can look into it. What should be the correct Content-Type?

[catarak]

it should depend on the type of asset, right? like if it's an image, vs a video, vs a .js file.

[francisli]

@dhruvdutt yes, @catarak is correct, it should depend upon the type of file being uploaded. typically, you'd install a library that has a mapping from common file extensions to mime-type to use. Not sure what's the most commonly used, here's the first search result:

https://www.npmjs.com/package/mime-types

You might try taking a look at the node modules shrinkwrap file and seeing if one is already installed as a dependency for another library...

[dhruvdutt]

@catarak @francisli Thanks for the guidance. 👍

I went through package-lock (equivalent of shrinkwrap in npm5 and above). There are some dependencies using mime-types but it gets installed inside their dependency's nested node_modules folder and not in the project's node_modules for us to use. We'll have to explicitly install mime-type.

Also, can you also please update the debug setups in original issue post? We don't have any new file modal now. I'm confused about how or where is the option to upload assets/images. 🤔

[catarak]

to upload files, you have to 1. open the sidebar (there's a > icon to the left by the file title), then click the 'v' by 'project-folder', then click 'add file', and you can upload a file in the dropzone area.

[dhruvdutt]

I get these errors when I try to upload something. I think it's because I'm missing AWS credentials. @catarak If you want to share your credentials, then please send them at [email protected]

[catarak]

you can make your own S3 bucket! the steps to set it up are in the README 😄

[stalgiag]

Hi wanted to repost a note from #1196 and say that the editor should not be updated to use version 0.10.2 until this has been resolved.

@dhruvdutt are you still working on this? I can give it a try otherwise. I think that this deserves relatively high priority.

[dhruvdutt]

@stalgiag I'm not working on this. You can go ahead and pick this up.

[stalgiag]

Great thanks @dhruvdutt !

Anybody have any thoughts on where I might look first? Navigating the project for the first time. As of now my best guess is to add headers to axios.post(...) in this line in uploader.js. It seems like this will only work with files added with dropzone, but I don't think that image assets will be added to the project local storage any other way so perhaps this is acceptable?