Jump to content

Save Drag and drop file attributes with angular


elcaiaimar

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!

 

Link to comment
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.

Link to comment
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!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...