search

purtuga / SPWidgets

Sharepoint Custom UI Widgets
74 stars 34 forks source link

Upload Simple Html test #47

Closed MarioVanDenEijnde closed 9 years ago

MarioVanDenEijnde commented 9 years ago

Hello Purtuga,

I have the following code below: But my page shows empty. Questions:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Untitled 1</title>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css" />
</head>

<body>

<div id="file_upload"></div>

<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script src="/Scripts/jquery.SPServices-2014.01.min.js"></script>
<script type="text/javascript" src='/scripts/jquery.SPWidgets.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
     $("div.file_upload").SPControlUpload({ listName: "{2651C49E-0709-4093-B497-7C66D42566A2}" });
});
</script>

</body>

</html>

Kind regards, Mario

purtuga commented 9 years ago

Your selector in incorrect... its looking for a div with a class of file_upload instead of an id... So it should be:

$("#file_upload").SPControlUpload({ listName: "{2651C49E-0709-4093-B497-7C66D42566A2}" });

Also: the above is a pure HTML file... is this being hosted in a SharePoint site?

/Paul

MarioVanDenEijnde commented 9 years ago

Hello Paul,

Ah. Stupid me. Thanks, And yes the Html is part of a sharepoint site. But I don't want to include the html inside an aspx page. This should also work?

I will test tonight.

Kind regards, Mario

Verstuurd vanaf mijn iPhone

Op 7 jun. 2015 om 14:38 heeft Paul T. notifications@github.com<mailto:notifications@github.com> het volgende geschreven:

Your selector in incorrect... its looking for a div with a class of file_upload instead of an id... So it should be:

$("#file_upload").SPControlUpload({ listName: "{2651C49E-0709-4093-B497-7C66D42566A2}" });

Also: the above is a pure HTML file... is this being hosted in a SharePoint site?

/Paul

— Reply to this email directly or view it on GitHubhttps://github.com/purtuga/SPWidgets/issues/47#issuecomment-109748313.

purtuga commented 9 years ago

No problem. Yes.  That should work.  Paul -- sent from mobile

MarioVanDenEijnde commented 9 years ago

Hello Paul,

Thanks that worked.

Remark: The upload page is in another sub website then the picture library. When I only enter the listID and leave everything default the upload url includes a slash to much : http://my-personaltrainer.nl/info//_layouts/Upload.aspxhttp://my-personaltrainer.nl/info/_layouts/Upload.aspx. I have managed to get rid of this by adding the webURL: 'http://my-personaltrainer.nl/myteam'

Question: As said earlier we use a picture library. After submitting an image the “editform” is returned. There are no required fields so we could skip this page. We have tried the option “uploadDonePage” but this doesn’t seem to do the trick. Can you tell me if this is possible and if yes how?

Kind regards, Mario

From: Paul T. [mailto:notifications@github.com] Sent: Sunday, June 7, 2015 14:56 PM To: purtuga/SPWidgets Cc: Mario van den Eijnde Subject: Re: [SPWidgets] Upload Simple Html test (#47)

No problem. Yes. That should work. Paul -- sent from mobile

— Reply to this email directly or view it on GitHubhttps://github.com/purtuga/SPWidgets/issues/47#issuecomment-109749127.

purtuga commented 9 years ago

Yes, I think what you want to do can be done using the onPageChange input parameter. Look at example 2 of the documentation, here: https://github.com/purtuga/SPWidgets/blob/master/documentation/SPWidgets.SPControlUpload.md#example-2

MarioVanDenEijnde commented 9 years ago

Hello Paul,

I looked into that but it seems although the picture library does not have required fields we still get into the following condition:

 } else if (ev.state == 3 && !ev.isUploadDone) {

Now I could also "close" the dialog in this condition but it seems the "onUploadDone" is only fired when I push the save button in this "editform". And I need the file.EncodedAbsUrl returned.

Getting stuck with this "EditForm" actually is not such a big deal but in this scenario I would like to hide the fields. I have to add that we are not opening a new "dialog" but we are using bootstrap and put the "file_upload" div inside a modal. And I am not sure how to "hide" the fields in this setup.

Any advise?

Kind regards, Mario

purtuga commented 9 years ago

Hmm. So it sounds like you have a custom Upload form? if that is the case, then I'm not sure how to help.

Re: Why is the edit/checkin form showing up. I was going to suggest that you try to upload a file (picture) to the library using the SP OOB forms, because essentially that is what this widget does: it display the SharePoint upload form inside a specially crafted iframe... and when it detects that it landed on the Edit form, after upload, it will display it to the user.

This is untested... but: try this:

onPageChange:   function(ev){ 
    if (ev.state == 3 && !ev.isUploadDone) {
         ev.hideOverlay = false;

        // Find the "OK" button and click on it.
        ev.page.find("input[type='button'][name$='SaveItem']:first").click();
    }
}

The code above will leave the overlay visible and try to click the "OK" (or "SAVE") button on the SharePoint Edit.

ps. just FYI: this widget was originally designed for older browsers and SP2007... I will be deprecating it (meaning: no more enh./changes) soon and introducing a new upload widget that will hopefully be much better to work with (and maintain).

/Paul.

MarioVanDenEijnde commented 9 years ago

Hello Paul,

We don't have a custom upload page. Thanks for the suggestion. But I cannot confirm the code works.

Question: is it possible to perform the action to "refresh" the iframe to the start position? (as I have told you we work with a modal which simply hides and shows up.)

Kind regards, Mario

On 8 jun. 2015, at 19:41, "Paul T." notifications@github.com<mailto:notifications@github.com> wrote:

Hmm. So it sounds like you have a custom Upload form? if that is the case, then I'm not sure how to help.

Re: Why is the edit/checkin form showing up. I was going to suggest that you try to upload a file (picture) to the library using the SP OOB forms, because essentially that is what this widget does: it display the SharePoint upload form inside a specially crafted iframe... and when it detects that it landed on the Edit form, after upload, it will display it to the user.

This is untested... but: try this:

onPageChange: function(ev){ if (ev.state == 3 && !ev.isUploadDone) { ev.hideOverlay = false;

    // Find the "OK" button and click on it.
    ev.page.find("input[type='button'][name$='SaveItem']:first").click();
}

}

The code above will leave the overlay visible and try to click the "OK" (or "SAVE") button on the SharePoint Edit.

ps. just FYI: this widget was originally designed for older browsers and SP2007... I will be deprecating it (meaning: no more enh./changes) soon and introducing a new upload widget that will hopefully be much better to work with (and maintain).

/Paul.

— Reply to this email directly or view it on GitHubhttps://github.com/purtuga/SPWidgets/issues/47#issuecomment-110088987.

purtuga commented 9 years ago

The only way to currently reset the widget, if the flow is interrupts, is to destroy it and then re-initialize it.  So when you hide the dialog, remove the widget from it.  And when you show the dialog again next time, just initialize it again.  What version of Sharepoint are you using? I'll see if I have a chance to try the code I suggested above. 

Paul -- sent from mobile

MarioVanDenEijnde commented 9 years ago

Hello Paul,

Sharepoint 2010 (foundation) Thanks.

Kind regards, Mario

From: Paul T. [mailto:notifications@github.com] Sent: Tuesday, June 9, 2015 13:00 PM To: purtuga/SPWidgets Cc: Mario van den Eijnde Subject: Re: [SPWidgets] Upload Simple Html test (#47)

The only way to currently reset the widget, if the flow is interrupts, is to destroy it and then re-initialize it. So when you hide the dialog, remove the widget from it. And when you show the dialog again next time, just initialize it again. What version of Sharepoint are you using? I'll see if I have a chance to try the code I suggested above.

Paul -- sent from mobile

— Reply to this email directly or view it on GitHubhttps://github.com/purtuga/SPWidgets/issues/47#issuecomment-110318355.

MarioVanDenEijnde commented 9 years ago

Hello Paul,

OK. As it seems I have to complete the process until the ev.isUploadDone is true. Otherwise I cannot receive the ev.EncodedAbsUrl.

So as far as I can see now I have to click on the “save” button in the second page to complete the process.

Kind regards, Mario

From: Paul T. [mailto:notifications@github.com] Sent: Tuesday, June 9, 2015 13:00 PM To: purtuga/SPWidgets Cc: Mario van den Eijnde Subject: Re: [SPWidgets] Upload Simple Html test (#47)

The only way to currently reset the widget, if the flow is interrupts, is to destroy it and then re-initialize it. So when you hide the dialog, remove the widget from it. And when you show the dialog again next time, just initialize it again. What version of Sharepoint are you using? I'll see if I have a chance to try the code I suggested above.

Paul -- sent from mobile

— Reply to this email directly or view it on GitHubhttps://github.com/purtuga/SPWidgets/issues/47#issuecomment-110318355.

purtuga commented 9 years ago

Yes.  That is correct and what I was trying to say before. 

Paul -- sent from mobile

MarioVanDenEijnde commented 9 years ago

Hello Paul,

This will be the last question because I take up too much of your time: In the following code snippet I thought I would look up the input boxes and make them read only or display none. But the first part of the code is handled well but the second keeps the solution hanging.

ev.page.find("form")
    .children(":visible")
        .css("display", "none")
        .addClass("ptWasVisible")
        .end()
ev.page.find("input[title='Naam Vereist veld']")
        .css("display", "none")
        .end()

I lookup up the 'Naam Vereist veld' in the source code.

Can you think of a reason?

Kind regards, Mario

purtuga commented 9 years ago

Is this the code that is hanging? or only the second ev.page.find() is hanging? The only think I can see is missing semicolons after the .end()

Paul T

MarioVanDenEijnde commented 9 years ago

Hello Paul,

When I use codeblock 1 everything works fine: ev.page.find("form") .... When I use codeblock 2 the website hangs: ev.page.find("input .... (both without semicolons)

Kind regards, Mario

purtuga commented 9 years ago

hmmm... Not sure why that's happening... Try this:

ev.page.find("form input[title='Naam Vereist veld']")
        .css("display", "none")
        .end();
console.log("Done with finding input");

For test purposes, I added a console.log() above just to see if you get passed the statement... if you do, then the "hang" part is somewhere else. Also: you're doing this after the file/image was uploaded, right? if that still does not work, wrap it in a setTimeout() (maybe the page needs a little bit to render its content):

setTimeout(function(){
    ev.page.find("form input[title='Naam Vereist veld']")
        .css("display", "none")
        .end();
    console.log("Done with finding input");
}, 1000);
MarioVanDenEijnde commented 9 years ago

Hello Paul,

The setTimeout seems to be the trick. Even if I bring it back to 100. Many Thanks for the solution and the support.

Kind regards, Mario

purtuga commented 9 years ago

Awesome... :) Like I said, this current widget is very hard to use and debug... The future widget will hopefully be much better.

MarioVanDenEijnde commented 9 years ago

Hello Paul,

How are you. Any news on the future upload widget?

Kind regards, Mario

purtuga commented 9 years ago

Hi Mario... Its funny... I actually worked on it this weekend... I have it working for a List Item (attachments), but not for a document library yet.. I assume your need is for document libraries, correct? I'll try to get it done soon. /Paul

MarioVanDenEijnde commented 9 years ago

Hello Paul,

Thanks. I thought I’d google and play around and I came up with the attached working example. I used the following source: http://sharepoint.stackexchange.com/questions/68502/how-to-copy-list-item-attachment-to-document-library-with-sharepoint-designer-wo

The only thing that is causing me a headache now is that I also want to use it for mobile use and the _arrayBufferToBase64 seems to cause a browser crash. Probably because the script is causing a memory overload. If you have an advise there I would appreciate this.

But please keep me updated. OK?

Kind regards, Mario

From: Paul T. [mailto:notifications@github.com] Sent: Monday, August 3, 2015 18:57 PM To: purtuga/SPWidgets SPWidgets@noreply.github.com Cc: Mario van den Eijnde mario@delafini.com Subject: Re: [SPWidgets] Upload Simple Html test (#47)

Hi Mario... Its funny... I actually worked on it this weekend... I have it working for a List Item (attachments), but not for a document library yet.. I assume your need is for document libraries, correct? I'll try to get it done soon. /Paul

— Reply to this email directly or view it on GitHubhttps://github.com/purtuga/SPWidgets/issues/47#issuecomment-127330802.

<!doctype html>

My-PersonalTrainer
purtuga commented 9 years ago

Again... very funny... The work I did over the weekend was to fix that exact issue.... The simple task of uploading a file to SharePoint does not need to read the data as binary... Just use readAsDataURI() instead of trying to read the file content as an array buffer... Here, see this post by Marc A. and specifically, the comment by a user named "Bryan", which is the one that names the use of it - http://sympmarc.com/2014/05/27/uploading-attachments-to-sharepoint-lists-using-spservices/

I also comment on that post earlier today. Hope this helps...

MarioVanDenEijnde commented 9 years ago

Hello Paul,

I am poor at scripting. Could I ask to modify the attached code I have send you with the readAsDataURI() solution?

Kind regards, Mario

From: Paul T. [mailto:notifications@github.com] Sent: Monday, August 3, 2015 19:18 PM To: purtuga/SPWidgets SPWidgets@noreply.github.com Cc: Mario van den Eijnde mario@delafini.com Subject: Re: [SPWidgets] Upload Simple Html test (#47)

Again... very funny... The work I did over the weekend was to fix that exact issue.... The simple task of uploading a file to SharePoint does not need to read the data as binary... Just use readAsDataURI() instead of trying to read the file content as an array buffer... Here, see this post by Marc A. and specifically, the comment by a user named "Bryan", which is the one that names the use of it - http://sympmarc.com/2014/05/27/uploading-attachments-to-sharepoint-lists-using-spservices/

I also comment on that post earlier today. Hope this helps...

— Reply to this email directly or view it on GitHubhttps://github.com/purtuga/SPWidgets/issues/47#issuecomment-127335539.

MarioVanDenEijnde commented 9 years ago

Hello Paul,

I modified my earlier script to suit the readAsDataURI() option. But also this approach is working in my website but not working on my iPhone.

Kind regards, Mario

From: Mario van den Eijnde Sent: Monday, August 3, 2015 19:25 PM To: 'purtuga/SPWidgets' reply@reply.github.com; purtuga/SPWidgets SPWidgets@noreply.github.com Subject: RE: [SPWidgets] Upload Simple Html test (#47)

Hello Paul,

I am poor at scripting. Could I ask to modify the attached code I have send you with the readAsDataURI() solution?

Kind regards, Mario

From: Paul T. [mailto:notifications@github.com] Sent: Monday, August 3, 2015 19:18 PM To: purtuga/SPWidgets SPWidgets@noreply.github.com<mailto:SPWidgets@noreply.github.com> Cc: Mario van den Eijnde mario@delafini.com<mailto:mario@delafini.com> Subject: Re: [SPWidgets] Upload Simple Html test (#47)

Again... very funny... The work I did over the weekend was to fix that exact issue.... The simple task of uploading a file to SharePoint does not need to read the data as binary... Just use readAsDataURI() instead of trying to read the file content as an array buffer... Here, see this post by Marc A. and specifically, the comment by a user named "Bryan", which is the one that names the use of it - http://sympmarc.com/2014/05/27/uploading-attachments-to-sharepoint-lists-using-spservices/

I also comment on that post earlier today. Hope this helps...

— Reply to this email directly or view it on GitHubhttps://github.com/purtuga/SPWidgets/issues/47#issuecomment-127335539.

function sendPic() { var selectedfile = document.getElementById('myFileInput').files[0]; if (selectedfile) { filereader = new FileReader(); //filereader.filename = selectedfile.name;

        filereader.onload = function() {
           data = filereader.result;
           n = data.indexOf(';base64,') + 8;
           data = data.substring(n);
        alert(data);
         var fileInput = document.getElementById('myFileInput');
             var file = fileInput.values;
              var filePath = $('#myFileInput').val(); // "c:\\test.pdf";
              alert(filePath);
         var file = filePath.match(/\\([^\\]+)$/)[1];
            alert(file);
            alert(X);

        source = encodeURI(filePath);
        destination = encodeURI('http://my-personaltrainer.nl/app/Pages/' + file);
        alert(destination);

        $().SPServices({
            operation: "CopyIntoItems",
            async: false,
            SourceUrl: source,
            DestinationUrls: [destination],
            Stream: data, //whatever variable you used to store the base64 encoded binary data from the GetItem call
            completefunc: function(xData, Status) {
                alert("Status=" + Status + "\n" + xData.responseText);
                } // end completefunc
        }); // end CopyIntoItems
        };

        filereader.onabort = function() {
           alert('Upload aborted');
        };

        filereader.onerror = function() {
           alert('Upload error');
        };

        filereader.readAsDataURL(selectedfile);
     }
  else alert('List item creation failed');
  }
purtuga commented 9 years ago

Glad you found a way to use it... The post I refereed you to actually had the code to make it work - in the blog comments, by a user called Bryan.

Re: iPhone What version of iPhone? Also, do you see any errors in the console? According to this, it should work in Safari mobile version 7.1... I'm not sure how that translates to the version of Safari and been unable to locate a good reference of iOS verstion -to- Safari mobile version.

In any case, I have not done much testing on the iPhone, so my help here may be very limited.

awube12 commented 8 years ago

Hi Paul. After we upgraded to internet explorer 11, our SPWidgets file upload doesn't work any more. The line "ev.page.find('input[title="name"]').val()" does not run. What is the solution for this please?

purtuga commented 8 years ago

Hard to tell what the solution might be. Do you see any errors?What version are you using? Paul -- sent from mobile

purtuga commented 8 years ago

Also: can you open up your own issue and not append to this old thread? Thanks. 

Paul -- sent from mobile

awube12 commented 8 years ago

I don’t see any errors. It just hangs there. The version I am using is 2.5.3. The funny part is it works in Chrome and Firefox browsers. The file gets uploaded. It is just the properties of the file. It looks like It won’t locate the “title” attribute from the ev.page.find(‘input[title=”County”]’).val(‘Dekalb’); . It doesn’t complete the whole operation.

From: Paul T. [mailto:notifications@github.com] Sent: Monday, March 14, 2016 12:35 PM To: purtuga/SPWidgets SPWidgets@noreply.github.com Cc: awube12 addisb@outlook.com Subject: Re: [SPWidgets] Upload Simple Html test (#47)

Hard to tell what the solution might be. Do you see any errors?What version are you using? Paul -- sent from mobile

— Reply to this email directly or view it on GitHub https://github.com/purtuga/SPWidgets/issues/47#issuecomment-196401091 . https://github.com/notifications/beacon/AQ7ByShSLfqIfyFBfRZC3EInfMqb7u7Bks5ptY5AgaJpZM4E6xfF.gif

awube12 commented 8 years ago

Sure. I will definitely do that.

Thank you Paul!

From: Paul T. [mailto:notifications@github.com] Sent: Monday, March 14, 2016 1:04 PM To: purtuga/SPWidgets SPWidgets@noreply.github.com Cc: awube12 addisb@outlook.com Subject: Re: [SPWidgets] Upload Simple Html test (#47)

Also: can you open up your own issue and not append to this old thread? Thanks.

Paul -- sent from mobile

— Reply to this email directly or view it on GitHub https://github.com/purtuga/SPWidgets/issues/47#issuecomment-196413114 . https://github.com/notifications/beacon/AQ7BybHJWqyGtRIoWUWawcVpfrCzUTYfks5ptZUWgaJpZM4E6xfF.gif