How can I append uploaded Images to form then post to server

Question

I’m am trying to upload images on my website then post them back to my server .

To upload the images I am using the plugin found here: http://jasny.github.io/bootstrap/javascript/#fileinput

So I included the javascript and css files found here:

cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css

cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js

On my html page I included the following :

  <div class="fileinput fileinput-new" data-provides="fileinput">
      <div class="fileinput-new thumbnail" style="width: 100px; height: 100px;">
        <img data-src="holder.js/100%x100%" alt="...">
      </div>
      <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
      <div>
          <span style="background-color: #68C3A3" class="btn btn-success btn-file">
              <span class="fileinput-new">Select Artist Image</span><span style="background-color: #68C3A3" class="fileinput-exists">Change</span>
              <input id="inPutArtistImage" type="file"  multiple>
          </span>
        <a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remove</a>
      </div>
    </div>

Selecting and removing images works nicely .

Now with a separate button I’m trying to append the selected files to Form DATA.

$scope.UpdateChannelImages = function() {
  var formData, thumbnail;
  formData = new FormData();
  if ($('#inPutArtistImage')[0].files && $('#inPutArtistImage')[0].files.length > 0) {
    thumbnail = $('#inPutArtistImage')[0].files[0];
    formData.append('inPutArtistImage', thumbnail, 'Artist' + thumbnail.name);

However I simply cannot append the files to form data:

I get this error: Cannot read property 'files' of undefined

here is the line that throws the error: if ($('#inPutArtistImage')[0].files && $('#inPutArtistImage')[0].files.length > 0) {

I need help appending the uploaded image to Form data

Since `$('#inPutArtistImage')[0]` is coming up undefined, leads me to believe you are calling `UpdateChannelImages()` before the input element is even in the DOM. Is that the case? — SteamDev, Nov 12 '14 at 22:21
No. I first select the image then call the upload by clicking a separate button — user1526912, Nov 12 '14 at 22:32
Is the `UpdateChannelImages()` method being called from within an iframe? If so, it would have no reference to the `#inPutArtistImage` element. — SteamDev, Nov 12 '14 at 22:57
Or, does the bootstrap plugin strip/alter the id of the file input you are trying to reference? — SteamDev, Nov 12 '14 at 23:04
The documentation for the plugin is found here: http://jasny.github.io/bootstrap/javascript/#fileinput — user1526912, Nov 12 '14 at 23:34

score 0 · Answer 1 · edited May 23 '17 at 10:26

0

To resolve this error I added the name attribute to the input element:

Thanks to this post: Jasny Bootstrap File Upload Control

edited May 23 '17 at 10:26

Community

1
1

answered Nov 13 '14 at 00:25

user1526912

15,818
14
57
92

How can I append uploaded Images to form then post to server

1 Answers1