2

UPDATE: We've resolved this one. Here is the working code:

<form method="post" enctype="multipart/form-data" action="" accept-charset="UTF-8">
  <input type="hidden" name="entryId" value="{{ entry.id }}">
  <input type="hidden" name="action" value="entries/saveEntry">
  <input type="hidden" name="sectionId" value="2">
  <input type="hidden" name="enabled" value="1">

  <input type="file" 
         name="replaceFile-{{ asset.id }}” 
         class="replace-file" 
         data-id="{{ asset.id }}" />

...and...

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script>
$(".replace-file").change(function() {
  var url = '/actions/assets/replaceFile',
      fileId = $(this).attr("data-id"),
      file = $("[name=replaceFile-"+fileId+"]")[0].files[0],
      formdata = new FormData();

  formdata.append("replaceFile", file);
  formdata.append("fileId", fileId);

  $("#output").html("Uploading...");

  $.ajax({
    url: url,
    type: 'POST',
    data:  formdata,
    cache: false,
    contentType: false,
    processData: false,
    success: function(data) {
      $("#output").html("Supposedly worked...");
    }
  });
});
</script>
1

In short, you have the right idea, but you're not uploading any files with that JavaScript. All you're doing is sending a file id to a Craft action that expects an uploaded file as well.

You can find an insight on how to change your javascript to include file data as well here

5
  • Thanks for pointing me in the direction I need to go. I've been tinkering with this all day now and haven't seemed to get any closer to a working model. I've updated my code above to reflect where I'm at with it now. Correct me if I'm wrong, but it does seem like the replaceFile action does also perform the file uploading. So like you said, the issue seems to still be my javascript not passing along what it needs to. In the console, my request shows [object Object] for the 'file' after it gets passed to the replaceFile action (maybe irrelevant).
    – Noah Yamen
    Nov 29 '16 at 22:26
  • You shouldn't be passing a jQuery object but an HTML node object. Try $("[name=replaceFile-"+fileId+"]")[0] instead of $("[name=replaceFile-"+fileId+"]"). Nov 30 '16 at 10:07
  • I've updated it based off of your suggestion and still no bueno. replaceFile just keeps returning "error: upload failed". I've updated my code above as well. I'm just testing this on a fresh install of craft, in the templates it included. You can take a look at it here: rhetoric.fyi/news/2016/we-just-installed-craft Obviously you'd have to be logged-in in order for it to work for you. For the record I am logged-in while I'm testing it.
    – Noah Yamen
    Nov 30 '16 at 15:26
  • Okay, so final fix, I promise! It actually should have been $("[name=replaceFile-"+fileId+"]")[0].files[0] so you actually add the file from the input field. If this works for you, please update the code in the question so that other people looking for the same solution can find it. Dec 1 '16 at 9:26
  • That did it, thank you Andris! I've updated the code above to reflect the correct working version. 👍🏼
    – Noah Yamen
    Dec 1 '16 at 15:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.