title: File Uploading ReadAsDataUrl
body: <p>I have a question about the <a href="https://developer.mozilla.org/en-US/docs/Web/API/File" rel="nofollow noreferrer">File API</a> and uploading files in JavaScript and how I should do this.</p>
  
  <p>I have already utilized a file uploader that was quite simple, it simply took the files from an input and made a request to the server, the server then handled the files and uploaded a copy file on the server in an uploads directory.</p>
  
  <p>However, I am trying to give people to option to preview a file before uploading it. So I took advantage of the File API, specifically the <code>new FileReader()</code> and the following <code>readAsDataURL()</code>.</p>
  
  <p>The file object has a list of properties such as <code>.size</code> and <code>.lastModifiedDate</code> and I added the <code>readAsDataURL()</code> output to my file object as a property for easy access in my Angular <code>ng-repeat()</code>.</p>
  
  <p>My question is, it occurred to me as I was doing this that I could store the dataurl in a database rather than upload the actual file? I was unsure if modifying the File data directly with it's dataurl as a property would affect its transfer.</p>
  
  <p>What is the best practice? Is it better to upload a file or can you just store the dataurl and then output that, since that is essentially the file itself? Should I not modify the file object directly?</p>
  
  <p>Thank you. </p>
  
  <p><strong>Edit:</strong> I should also note that this is a project for a customer that wants it to be hard for users to simply take uploaded content from the application and save it and then redistribute it. Would saving the files are urls in a database mitigate against right-click-save-as behavior or not really?</p>