I have a react setup where I am using superagent to upload files to a google storage bucket. The request uses a signed url to send to the bucket and looks like the following. The first part is how we use filereader and get the signed urls from the server and the second part is how superagent then does a put request to put the files in the bucket.
const file = this.props.file
const reader = new FileReader()
reader.onload = () => {
uploadService
.getSignedURLs({
files: [
{
fileName: file.name,
contentType: file.type
}
]
})
.then(
response => {
this.setState({
urls: response.signed.map(function(data) {
data['file'] = file
return data
})
})
},
error => {
// handleError
}
)
}
reader.readAsBinaryString(file)
Later on, in a separate function that waits for the FileReader to load, we do the following where the headers returned from the server are:
headers = {
'Access-Control-Request-Header': 'Content-Type',
'Content-Type': content_type,
'Access-Control-Allow-Origin': access_control_allow_origin
}
...
self = this;
request
.put(url)
.set(headers)
.attach(fileName, file)
.on('progress', event => self.updateProgress(event.percent))
.end((err, res) => {
if (!err) {
self.reportSuccess(fileName, endLocation)
self.setState({ success: true, uploading: false })
} else {
self.setState({ uploading: false, fail: true })
}
})
The problem is that the video files that are put in the bucket are malformed. Even though they are the same size as the original, they do not play. I ran ffprobe on the uploaded file and it said that:
[mov,mp4,m4a,3gp,3g2,mj2 @ 0x7fcddd804c00] Format mov,mp4,m4a,3gp,3g2,mj2 detected only with low score of 1, misdetection possible! [mov,mp4,m4a,3gp,3g2,mj2 @ 0x7fcddd804c00] moov atom not found /path/to/file.mov: Invalid data found when processing input
Where on the original, it said that:
Metadata: major_brand : mp42 minor_version : 0 compatible_brands: isommp42 creation_time : 2018-09-08T05:16:54.000000Z Duration: 00:00:26.77, start: 0.000000, bitrate: 9094 kb/s Stream #0:0(und): Video: h264 (High) (avc1 / 0x31637661), yuv420p(tv, bt709), 1920x1080 [SAR 1:1 DAR 16:9], 9020 kb/s, 30 fps, 30 tbr, 15360 tbn, 60 tbc (default) Metadata: handler_name : VideoHandler Stream #0:1(und): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, mono, fltp, 95 kb/s (default) Metadata: creation_time : 2018-09-09T23:00:53.000000Z handler_name : IsoMedia File Produced by Google, 5-11-2011
I ran a further test to see if it was FileReader by loading a file with it and then immediately saving (using this handy function - https://stackoverflow.com/a/30832210/592419) to local. This had no problem, which makes me think that the problem must be in the Put request.
