Upload PDFs and create a list of links

[Bill Stephenson]

First, I like to say thank you to all that have helped here. I've been lurking for awhile now and learned a lot, but not enough... 

I'm having trouble creating a list of links to PDF attachments. I've scoured the internets looking for examples on this (there's not much yet) and pretty copied Nolan's upload code example:

function startUploader() {
 
 var file = '';
 var myid = '';
 var input = document.querySelector('input');

 input.addEventListener('change', function () {
  var file = input.files[0]; // file is a Blob
  myid = input.files[0].name;

  pdfdb.put({
 _id: myid,
 _attachments: {
  filename: {
 type: "application/pdf",
 data: file
  }
 }
  }).catch(function (err) {
 console.log(err);
  });

  var myUrl = blobUtil.createObjectURL(file);  
  document.getElementById("thelist").innerHTML+= '<p><a href=\''+myUrl+'\'">'+myid+'</a></p>';
 
 });
}

The URL output from that works in Safari:

<a href="blob:http://my.com:8080/e8dce428-20f8-4037-8ddd-95b53530c926">Personal CEU Log.pdf</a>

But I just can't seem to get the links right. Here's where I try to make the list of PDFs:

function loadList() {
 var myUrl = '';
 var count=0;
 pdfdb.allDocs({include_docs: true}, function(err, doc) {
 
 if (err) {
 // Err!
 document.getElementById("thelist").innerHTML=err;
 console.log( "Error: loadList: " + err );
 } else {
 for (var i in doc.rows) {
 console.log("Before count: "+count+ "  i: " +i+ "  ID: " +doc.rows[i].id);
 pdfdb.getAttachment(doc.rows[count].id, 'filename').then(function (blob) {
// Create URL
//   myUrl = blobUtil.createObjectURL(blob);
   myUrl = URL.createObjectURL(blob);
   console.log("After count: "+count+ "  i: " +i+ "  ID: " +doc.rows[i].id);
     document.getElementById("thelist").innerHTML+= '<p><a href="' + myUrl + '">'+doc.rows[count].id+'</a></p>';
   count++;  
 }).catch(function (err) {
   console.log(err);
 });
 };
 }
 });
}

 

But neither of these URLs work when I click the link once in Safari and I get these errors in the console:

myUrl = blobUtil.createObjectURL(blob);
 <a href="blob:http://my.com:8080/a066b1e3-ea5b-45ff-97f1-9247c8193a29">Personal CEU Log.pdf</a>
[Error] Failed to load resource: Frame load interrupted (blob:http://my.com:8080/a066b1e3-ea5b-45ff-97f1-9247c8193a29, line 0)

myUrl = URL.createObjectURL(blob);
<a href="blob:http://my.com:8080/28431019-5108-4e19-a4fc-0c57c8d7815c">Personal CEU Log.pdf</a>
[Error] Failed to load resource: Frame load interrupted (blob:http://my.com:8080/28431019-5108-4e19-a4fc-0c57c8d7815c, line 0)

 If I click the link twice I get raw output like this in the browser window:

%PDF-1.4 %âãÏÓ 68 0 obj <> endobj xref 68 11 0000000016 00000 n 0000000875 00000 n 0000001115 00000 n 0000001348 00000 n 0000001748 00000 n 0000001783 00000 n 0000002457 00000 n 0000005150 00000 n 0000005372 00000 n 0000000707 00000 n 0000000516 00000 n trailer <<3A291BBCF197F04685637E092F678491>]>> startxref 0 %%EOF 78 0 obj <>stream xÚb```g``žÃ ï P ³0p4 ‹±C1 ƒ2 Ob. Sý2…ÝL @"Œ"]@š ˆ7 1+ ƒÄZ¨9V`³ Dm ê˜ á&r20h$@D þ Íø ¢ endstream endobj 77 0 obj <>/Size 68/Type/XRef>>stream xÚbbba`b`` î ÀTï´ endstream endobj 69 0 obj <>/Outlines 1 0 R/Metadata 8 0 R/PieceInfo<>>>/Pages 7 0 R/PageLayout/SinglePage/StructTreeRoot 10 0 R/Type/Catalog/PageLabels 5 0 R>> endobj 70 0 obj <>/Font<>/ProcSet[/PDF/Text]/ExtGState<>>>/Type/Page>>

I suspect this has to do with my blob not being configured right, but I'm just stumped on where to go from here.

I apologize for the long post, but I felt this may help others and I know any help on letting me know what I'm doing wrong would be much appreciated.

 

[Bill Stephenson]

Finally got it. I apologize for missing this and pestering the group. 

  pdfdb.put({
 _id: myid,
 url: myUrl,
 _attachments: {
  filename: {
// changed this:
// type: "application/pdf",

// to this:
 content_type: "application/pdf",

[Nolan Lawson]

No problem; it is definitely confusing that there's a "type" on blobs but a "content_type" on attachments! Maybe we should emit a warning.