Are you using the default S3Uploader?
I was asking about this yesterday or the day before and am currently at this point:
def presign_upload_banner(entry, socket) do
uploads = socket.assigns.uploads
key = s3_key(entry)
config = %{
region: "eu-west-2",
access_key_id: System.fetch_env!("AWS_ACCESS_KEY_ID"),
secret_access_key: System.fetch_env!("AWS_SECRET_ACCESS_KEY")
}
{:ok, fields} =
SimpleS3Upload.sign_form_upload(config, @bucket,
key: key,
content_type: entry.client_type,
max_file_size: uploads[entry.upload_config].max_file_size,
expires_in: :timer.hours(1)
)
meta = %{uploader: "S3Banner", key: key, url: s3_host(), fields: fields, canvas_height: 360}
{:ok, meta, socket}
end
360 is a placeholder for a variable value. You can add values to the meta and access them in the Uploader JS using entry.meta.YOURVALUE
Uploaders.S3Banner = function(entries, onViewError) {
entries.forEach(entry => {
let formData = new FormData();
let {url, fields} = entry.meta;
Object.entries(fields).forEach(([key, val]) => formData.append(key, val));
let img = new Image();
img.onload = function() {
const sliceHeight = entry.meta.canvas_height;
let canvas = document.createElement('canvas');
canvas.width = screen.width;
canvas.height = sliceHeight;
let ctx = canvas.getContext('2d');
const cropStart = (img.height - sliceHeight) / 2;
const cropEnd = cropStart + sliceHeight;
ctx.drawImage(img, 0, cropStart, img.width, cropEnd - cropStart, 0, 0, canvas.width, canvas.height);
// convert the canvas content to a Blob object and add it to the form data
canvas.toBlob(function(blob) {
formData.append("file", blob);
// send the form data via XHR
let xhr = new XMLHttpRequest();
onViewError(() => xhr.abort());
xhr.onload = () => xhr.status === 204 ? entry.progress(100) : entry.error();
xhr.onerror = () => entry.error();
xhr.upload.addEventListener("progress", (event) => {
if(event.lengthComputable){
let percent = Math.round((event.loaded / event.total) * 100);
if(percent < 100){ entry.progress(percent); }
}
});
xhr.open("POST", url, true);
xhr.send(formData);
});
};
img.src = URL.createObjectURL(entry.file);
});
}
The above will take the uploaded image and create a screen width banner that is 360px in height. It will crop the image above and below to leave a “slice” of the original image.
You can obviously just change the JS to change the dimensions and resize as well though.
What I haven’t figured out how to do is validate the upladed image size. I can add an IF statement to check the dimensions and make the above return an error, but no idea how to send an event to the server yet as still learning.
