Using allow_upload, whats the process of modifying files before upload?

GazeIntoTheAbyss · April 9, 2023, 2:42pm

I am quite confused, so sorry if my question is also confusing.

I’ve been using the below to deal with general uploads with no issues, but I was wondering if its possible to edit/modify files before uploading them?
https://hexdocs.pm/phoenix_live_view/uploads-external.html#direct-to-s3

My understanding of the below is that the presign_upload is stored as a function in the uploadconfig that is called when you actually hit save? Is this correct or incorrect? If correct that means I can modify the uploaded image and the function will just run with whatever is in the socket? If you wanted a user to create an avatar of a set height/width, they could upload a larger image and align it with a box of said height/width to crop the image.

|> allow_upload(:avatar, accept: ~w(.jpg), max_entries: 1, external: &S3Upload.presign_upload/2)

I can figure out the image resizing, but I don’t know how you replace the original image that got uploaded with the resized image when used with the presign function basically or if its possible/practical.

I know the flow I would like to use, but the uploader process honestly confuses me so much I don’t know the best way to do it.

Any info on any of this appreciated.

aiwaiwa · April 9, 2023, 2:54pm

(Redact it, please, I missed the s3 part of the question)

polygonpusher · April 9, 2023, 5:23pm

I’ve done this a few ways. Mostly its all done on the front end via hooks.

here’s some examples.

Front end UI:

github.com

MorphicPro/opal_nova/blob/aa9e4548ff63449f6998b2fbbd422a360199be85/lib/opal_nova_web/live/admin/post_live/form_component.html.heex#L49-L80


      
          <%= if @uploads.image.entries == [] and @post.thumb_image do %>
            <img class="w-[300px] mx-auto mb-2" src={@post.thumb_image} />
            <div>
              <div class="mt-4 relative rounded-2xl shadow-mb ">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <FontAwesome.LiveView.icon name="copy" type="solid" class="text-slate-100 inline h-6 w-6 fill-current ml-2" />
                </div>
                <input type="" class="bg-neutral-600 text-slate-100 focus:ring-gray-500 focus:border-gray-500 block w-full pl-14 px-6 py-4 sm:text-sm border-gray-300 rounded-lg" value={@post.cover_image} />
              </div>
            </div>
          <% else %>
            <%# Phoenix.LiveView.Helpers.upload_errors/1 returns a list of error atoms %>
            <%= for err <- upload_errors(@uploads.image) do %>
              <p class="alert alert-danger"><%= error_to_string(err) %></p>
            <% end %>
          <% end %>
          <%= for entry <- @uploads.image.entries do %>
            <article class="upload-entry">
              <figure>
                <%= live_img_preview entry, width: 300 %>

This file has been truncated. show original

callback:

github.com

MorphicPro/opal_nova/blob/aa9e4548ff63449f6998b2fbbd422a360199be85/lib/opal_nova_web/live/admin/post_live/form_component.ex#L94-L99


      
          case consume_uploaded_entries(socket, :image, fn %{url: url, md_url: md_url, sm_url: sm_url},
                                                           _ ->
                 {:ok, [url, md_url, sm_url]}
               end) do
            [[url, md_url, sm_url]] ->
              image_map = %{"thumb_image" => sm_url, "cover_image" => md_url, "source_image" => url}

JS callbacks.

github.com

MorphicPro/opal_nova/blob/feat/jc/tailwind_admin/assets/js/app.js#L26-L76


      
          let Uploaders = {}
          
          
Uploaders.S3 = function(entries, onViewError){
            entries.forEach(entry => {
              let {full_string, medium_string, small_string} = entry.meta
          
          
    // console.debug(entry.file)
              var blob = new Blob([entry.file], {type: entry.file.type});
              let xhr = new XMLHttpRequest()
              onViewError(() => xhr.abort())
              xhr.onload = () => {
                if(xhr.status === 200){
                  console.debug(entry.file)
                  const imageUrl = `https://morphic-pro.imgix.net/opalnova/${entry.file.name}`;
          
          
        fetch(imageUrl + "?w=600")
                  .then(response => response.blob())
                  .then(imageBlob => {
                      let md_xhr = new XMLHttpRequest()

This file has been truncated. show original

In the js call back you can see how I get a signed url, send the file to a bucket, re request the same image via imagx to scale the image, then re-upload the new scaled image via a signed url, in short scaling the image via a 3rd party all done from the client side.

Not saying this a good example but its an example.

Here is a older example where I use a wasm lib to scale the image all 100% client side before I send to s3.
again this is done mostly via js and hooks. In this example I even pull out exif data from the image too.

github.com

MorphicPro/morphic.pro/blob/master/assets/js/app.js#L241-L375


      
          function draw(target) {
          
          
  var ctx = document.getElementById('canvas').getContext('2d'),
              img = new Image(),
              f = document.getElementById("file").files[0],
              url = window.URL || window.webkitURL,
              src = url.createObjectURL(f);
          
          
  if (target == "snap") {
          
          
    let reader = new FileReader();
              reader.readAsArrayBuffer(f)
              reader.onload = function () {
                console.log(reader.result);
                import('exifreader')
                  .then(ExifReader => {
                    let exif = ExifReader.load(reader.result);
                    document.getElementById("snap-form_exif_string").value = JSON.stringify(exif)
          
          
          import('json-formatter-js')

This file has been truncated. show original

GazeIntoTheAbyss · April 10, 2023, 2:24am

Thanks for the detailed reply, Its nice to see how someone else has dealt with it.

I had figured out how to modify the image within the Uploader and had considered Uploading then re requesting the image but figured there must be a way to just modify the image before submission seperately.

My plan currently is to upload the file normally, then add a handle_event to get a crop starting value, pass that value to the uploader through meta and do some maths to crop the image to the correct size based on the starting position.

Probably going to go horribly wrong, but science is about blowing stuff up

Thanks again.

sabrina-stangler · March 21, 2024, 9:11pm

Did it go horribly wrong? I hope not! Curious how things went