Ap3twe's avatar

Multiple Inputs field Styling

I would like to use this input file code in my project. My reason is styling the input field. The downside is I have 9 input fields in my HTML. The reason I did not use one input [multiple] is that they are not related so I want the user to upload the files each one by one depending on the condition I will set. I found this code. When I upload a file It gets loaded to all the rest of the inputs. Is there a way I don't have to duplicate the many times? I want to use only one script to control all the input fields. the question is it is possible or I have to copy each script separately?

<div class="file-upload">
  <button class="file-upload-btn" type="button" onclick="$('.file-upload-input').trigger( 'click' )">Add Image</button>

  <div class="image-upload-wrap">
    <input class="file-upload-input" type='file' onchange="readURL(this);" accept="image/*" />
    <div class="drag-text">
      <h3>Drag and drop a file or select add Image</h3>
    </div>
  </div>
  <div class="file-upload-content">
    <img class="file-upload-image" src="#" alt="your image" />
    <div class="image-title-wrap">
      <button type="button" onclick="removeUpload()" class="remove-image">Remove <span class="image-title">Uploaded Image</span></button>
    </div>
  </div>
</div>


  .file-upload {
    background-color: #ffffff;
    width: 300px;
    min-width: 15%;
    margin: 0 auto;
    padding: 20px;
  }

  .file-upload-btn {
    width: 100%;
    margin: 0;
    color: #fff;
    background: #085aad;
    border: none;
    padding: 10px;
    border-radius: 4px;
    border-bottom: 4px solid #085aad;
    transition: all .2s ease;
    outline: none;
    text-transform: uppercase;
    font-weight: 700;
  }

  .file-upload-btn:hover {
    background: #F4754E;
    color: #ffffff;
    transition: all .2s ease;
    cursor: pointer;
  }

  .file-upload-btn:active {
    border: 0;
    transition: all .2s ease;
  }

  .file-upload-content {
    display: none;
    text-align: center;
  }

  .file-upload-input {
    position: absolute;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    outline: none;
    opacity: 0;
    cursor: pointer;
  }

  .image-upload-wrap {
    margin-top: 20px;
    border: 4px dashed #085aad;
    position: relative;
  }

  .image-dropping,
  .image-upload-wrap:hover {
    background-color: #999;
    border: 4px dashed #ffffff;
  }

  .image-title-wrap {
    padding: 0 15px 15px 15px;
    color: #222;
  }

  .drag-text {
    text-align: center;
  }

  .drag-text h3 {
    font-weight: 100;
    text-transform: uppercase;
    color: #085aad;
    padding: 60px 0;
  }

  .drag-text h3:hover {
     color: #fff;
  }

  .file-upload-image {
    max-height: 200px;
    max-width: 200px;
    margin: auto;
    padding: 20px;
  }

  .remove-image {
    width: 200px;
    margin: 0;
    color: #fff;
    background: #F4754E;
    border: none;
    padding: 10px;
    border-radius: 4px;
    border-bottom: 4px solid #b02818;
    transition: all .2s ease;
    outline: none;
    text-transform: uppercase;
    font-weight: 700;
  }

  .remove-image:hover {
    background: #c13b2a;
    color: #ffffff;
    transition: all .2s ease;
    cursor: pointer;
  }

  .remove-image:active {
    border: 0;
    transition: all .2s ease;
  }
function readURL(input) {
    if (input.files && input.files[0]) {

      var reader = new FileReader();

      reader.onload = function(e) {
        $('.image-upload-wrap').hide();

        $('.file-upload-image').attr('src', e.target.result);
        $('.file-upload-content').show();

        $('.image-title').html(input.files[0].name);
      };

      reader.readAsDataURL(input.files[0]);

    } else {
      removeUpload();
    }
  }

  function removeUpload() {
    $('.file-upload-input').replaceWith($('.file-upload-input').clone());
    $('.file-upload-content').hide();
    $('.image-upload-wrap').show();
  }
  $('.image-upload-wrap').bind('dragover', function () {
          $('.image-upload-wrap').addClass('image-dropping');
      });
      $('.image-upload-wrap').bind('dragleave', function () {
          $('.image-upload-wrap').removeClass('image-dropping');
  });
0 likes
10 replies
Tray2's avatar

What is it you are trying to do?

Tray2's avatar

Yes and since you use classes you can add them to as many inputs as you like in your code.

If you are talking about not wanting to write the code for the element in your view multiple times you can use a foreach in your view as long as you pass an array of filed names.

$fields = ['field1', 'field2', 'field3'];
@foreach($fields as $field)
    <input type="file" name="{{ $field }}">
@endforeach
Ap3twe's avatar

I was thinking of a better way of not using the script many times. That means I have to copy the script 9ine times

Ap3twe's avatar

@TRAY2 - Let me clarify. Css input fields is tricky to to style. I found this code with styling and drag and drop. It works perfectly. I just want to use it many times in the page. In the current state when I upload a file, the script affects all the other input fields. I can solve it by using classes for each input field and having multiple Js script dedicated to each. What I want is how do is: I wanna use only 1 Js script to control each input field independently? Thank you I hope you get it now. Example : input 1, input 2, input 3. They are not related but use one script to manipulate the styling of each independently.

Tray2's avatar

Just pass the element to the JavaScript and then manipulte it.

Ap3twe's avatar

I will create jsfiddle file and show it so you can get it

Snapey's avatar

because the script is using classes to target the elements

this

        $('.image-upload-wrap').hide();

        $('.file-upload-image').attr('src', e.target.result);
        $('.file-upload-content').show();

        $('.image-title').html(input.files[0].name);
      };

will affect all inputs that have class with those names. Since you repeat the input then they all have the same class and all get affected at the same time.

Ideally you would give each element a unique ID and use that for targetting the behaviour and not the class

Please or to participate in this conversation.