Jump to content
elcaiaimar

Save Drag and drop file attributes with angular

Recommended Posts

Hello everybody, I'm new in angular so sorry if my question is ridiculous. I have a drag and drop file area and when I put a file I put his details (attributes: name, size, type) on inputs disabled because I don't want that users can change them. All of that is a form, so I want to save this with angular in scopes.

 

Here my code:

 

<div ngf-drop ngf-select ng-model="files" class="drop-box" 
  ngf-drag-over-class="'dragover'" ngf-multiple="true" ngf-allow-dir="true"
  accept="{{acceptSelect}}"
  ngf-pattern="pattern" required>Arrastre y suelte su archivo aquí</div>
<div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>
<br>
<div class="preview">
  <div>Detalles del video: 
    <div style="clear:both" class="videodetails" ng-repeat="file in files">
      <div class="form-group">
        <label class="col-md-4 control-label" for="fileName">{{ "Nombre" }}</label>
        <div class="col-md-5">
         <input id="fileName" type="text" ng-model="file.name" disabled>
        </div>
     </div>
     <div class="form-group">
       <label class="col-md-4 control-label" for="fileSize">{{ "Tamaño" }}</label>
       <div class="col-md-5">
        <input id="fileSize" type="text" ng-model="file.size" disabled>
     </div>
</div>
     <div class="form-group">
       <label class="col-md-4 control-label" for="fileType">{{ "Tipo" }}</label>
       <div class="col-md-5">
         <input id="fileType" type="text" ng-model="file.type" disabled>
       </div>
     </div>

JavaScript:

 

$scope.file = function (data) {
   $scope.file.fileName = data.name;
   $scope.file.fileSize = data.size;
   $scope.file.fileType = data.type;
}

I don't know what I'm doing wrong. Any help? Does anybody know to fix it?

 

Thank you very much!

 

Share this post


Link to post
Share on other sites

What happens when you run that? Are there errors in your browser's console?

 

You can put those things on the page if you want so the user can see them, but don't get the submitted values when you process that form. When you process the form then you should only process the actual uploaded file, not the other file information. Get the rest of the information from the file itself instead of from the form. Even if you make those disabled people can still submit their own values for them, so treat them as informational only and just get the actual values from the uploaded file.

Share this post


Link to post
Share on other sites

Hello,

 

what it happens is that when I try to save the attributes on scopes, they are undefined. There aren't errors in my browser console.

 

After your answer, How could I get the file information and save it in scopes. My main problem is with javascript.

 

 

Thank you very much!

Share this post


Link to post
Share on other sites

I don't have enough experience with Angular to be much help, but your div is using a model called "files", while the others are using "file". Should that be changed? I'm not clear about how the data gets populated.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...