I am having an issue getting images to upload via AWS on iOS devices (and some random Androids). This is for a web app. It seems obviously connected to the iOS OS, but not exactly sure what the fix is.
Here is my template (Blaze):
<template name="ImagesModal">
<div class="modal fade" id="modal2-{{taskItemId}}">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add Images</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="file" accept="image/*;capture=camera" multiple="multiple">
</div>
{{#each Images}}
<div>
<hr>
<img src="{{url imageId}}" class="img-thumbnail">
</div>
{{/each}}
</div>
<div class="modal-footer">
<h5 STYLE="text-align: center; color: red">**DO NOT CLOSE THIS WINDOW UNTIL IMAGE THUMBNAILS APPEAR!**</h5>
</div>
</div>
</div>
</div>
</template>
and here is my .js:
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
import { insertImage } from '../../imports/api/images/methods';
const uploadFile = (file, signedRequest, cb) => {
const xhr = new XMLHttpRequest();
xhr.open('PUT', signedRequest);
xhr.onreadystatechange = () => {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
cb(null);
} else {
cb(true);
}
}
};
xhr.send(file);
};
Template.ImagesModal.events({
'change input[type="file"]' (event) {
const {clientId, taskType, taskId, taskItemId} = Template.currentData();
const {files} = event.target;
for (let file of files) {
const params = {fileType: file.type};
Meteor.call('images.getS3UploadCredentials', params, (error, result) => {
if (error) {
// TODO: Tell user an error occured
console.error('ERROR', error);
}
uploadFile(file, result.signedRequest, (error) => {
if (error) {
// TODO: Tell user an error occured
console.error('ERROR');
} else {
// Store a reference to the file in the DB
const params = {
_id: result.imageId,
clientId,
taskItemId,
url: result.url,
name: file.name,
size: file.size,
type: file.type,
};
insertImage.call(params, error => {
if (error) {
// TODO: Handle errors
console.error(error);
}
});
}
});
});
}
}
});
Template.ImagesModal.helpers({
url(imageId) {
const {baseUrl} = Meteor.settings.public.images;
return `${baseUrl}photos/${imageId}?w=200&h=200`;
}
});
I am not getting any errors etc. It just hangs.