Add file or versions from blob vs. browse to file

Ed Davis

Have a repetitive process on the client side of a Web Report that slices and dices a number of "csv" files to create a JSON data source for a grid which is consumed by another WR to display the data in a formatted grid. The process is working using html input type="file" for the three (3) input selectors and the one (1) upload selector which uses a CS REST API "versions" call to update the file on content server.  I would like to trim this down the upload process if possible by utilizing the the CS REST API XMLHttpRequest and XHR2 FormData which supports this. The trouble is that CS throws the "illegal attempt to upload a document". From the forums, it seems to be stuck on seeing the 'file' attribute. Is this possible at all?

Snippet:
     // Create Blob

     var text = document.getElementById("item12_textarea_1").value;

    text = text.replace(/\n/g, ""); // To retain the Line breaks.

    var blob = new Blob([text], { type: "text/plain"});

            // Comment out Manual File Pick Call     
           // var file = $('#item11_file_1')[0].files[0];

           var body = {

            id: 4766535

            };

            formData = new FormData();

            formData.append('fname','csx.txt');

            formData.append('body', JSON.stringify(body));

            formData.append('data',blob);

            //Old Manual Call
            //formData.append('file', file);

              

            $.ajax({

                url: "[LL_REPTAG_URLPREFIX /]/api/v1/nodes/4766535/versions",

                beforeSend: function(xhr){xhr.setRequestHeader('OTCSTicket', [LL_REPTAG_OTCSTICKET QUOTE /]);},

                method: "POST",

 //               data: formData,

                processData: false,

                contentType: false,

                 success: function(response) {

                       alert("Version Update Success.");

                },

                error: function(error) {

                 alert("Copying Template Failed.");

                }

            });

        }

Matthew_Pinkney

I don't believe this is possible. You'd have to add a feature request to get this.

Ed Davis

Yeah, thought so.  The REST API seems a little dated when it comes to some newer  ES6/JS offerings.

Thanks.

Ed

Matthew_Pinkney

Do you have some business scenarios where it'd be preferable to use a blob over a file and why?
What other types of things would you like to see?

Ed Davis

This is for a WR Parser_Uploader interface that requires the user (Supply Chain) select 3 CSV/SKV files from two legacy inventory systems we support. These three files are combined into a JSON string that is uploaded to Content Server and is displayed/distributed on a Kendo jquery UI Grid for our Critical Spares. It would be nice to stream-line the last step for the upload as I have to take the JSON string and save it locally, then the user has to browse to findit so it can be uploaded to CS. I have attached a couple of pics of the current two WR interfaces.

Ed Davis

We also make extensive use of forms with WR Power Views. I have developed a Drag and Drop WYSISYG form designer that integrates with both Forms and Categories within CS. One use case I would like to implement would be to use the same BLOB HXR2 FormData type of a Ajax call would allow me to save the form as a PDF for preservation with a commercial or MIT JS or jQuery PDF lib .  To implement that now, we would have to do the same legacy wash, spin, dry cycle of creating the PDF in memory, saving it locally via a browser (input type:file) and then another browser (input type:file) to retrieve the same file I just saved. Much cleaner, faster and less error prone if I could do a  POST api/v2/node create with a Blob of the created PDF with the file boundary definition.  

Anyway, that's my wish list for Create and Versions.

Cheers,

Ed

Ferdinand Prantl

If you want to upload a new document or a new version to an existing document, you can generate its content on the fly. You can create either a Blob or File object using their constructors and pass it to the network request just like the File object from a file input form field.

Problems in your example

1. You have to set the name of the part with the content to "file". You set it to "data", which is ignored by the REST API.

2. Set the file name using the File constructor. You set it to a part "fname", which is ignored by the REST API.

Solution

If you use the Blob constructor, the upload will work, but you will not be able to set the file name. It will be something set by the browser, like "blob". You might ignore it, because the file name is buried in the version properties only:

<div>new Blob(['...'], { type: 'text/plain' })</div><div></div>

If you use the File constructor, you will be able to specify the file name too:

<div>new File(['...'], 'example.txt', { type: 'text/plain' })</div><div></div>

Examples of adding a new version and a new document are attached.

i am sorry for not posting the short code examples here as it is usual in other forums. I spent so much time trying workarounds for bugs in text formatting in this forum editor and in the end it was getting only worse. It is impossible to paste code examples or use formatting like headings and lists here.

Ed Davis

WOW!, Thanks so much. Will give it a hook.

Ed

Ed Davis

Worked fantastic. Will try some other mime types.

Thanks again.

Ed