none
Capture image by camera (Phone/Laptop) and save in SharePoint List/Library RRS feed

  • Question

  • Capture image by camera (Phone/Laptop) and save in SharePoint List/Library. 

    Note : I dont have power App or Flow. Want solution by code.


    Shiv Sharma

    Tuesday, November 12, 2019 9:52 AM

All replies

  • Hi SharePoint User02,

    Could you please share more details of the issue? Which version of SharePoint are you using? And may i know what development stack you're using? 

    Best Regards,

    Baker Kong


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click  here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, November 13, 2019 3:30 AM
  • I am using SharePoint 2013

    I have a requirement in which in a form there is capture image of the visitor and on submit click save it in Share Point  Library/List. Development Stack will be Jquery, java,jsom,SP Services in SharePoint 2013.


    Shiv Sharma

    Thursday, November 14, 2019 4:55 AM
  • Hi SharePoint User02,

    I understand you want to upload an image file to a library. Below is a snippet code about how to upload file via JSOM. Please take a reference. 

    <html>
    <head>
        <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
        <script language="javascript" type="text/javascript">
            $(document).ready(function () {
                    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', registerClick);
            });
    
            function registerClick() {
                //Register File Upload Click Event   
                $("#addFileButton").click(readFile);
            }
    
            function readFile() {
                //Get File Input Control and read th file name  
                var element = document.getElementById("getFile");
                var file = element.files[0];
                var parts = element.value.split("\\");
                var fileName = parts[parts.length - 1];
    
                //Read File contents using file reader  
                var reader = new FileReader();
                reader.onload = function (e) {
                    uploadFile(e.target.result, fileName);
                }
                reader.onerror = function (e) {
                    alert(e.target.error);
                }
                reader.readAsArrayBuffer(file);
            }
    
            function uploadFile(arrayBuffer, fileName) {
                //Get Client Context,Web and List object.  
                var clientContext = new SP.ClientContext();
                var oWeb = clientContext.get_web();
                var oList = oWeb.get_lists().getByTitle('Documents');
    
                //Convert the file contents into base64 data  
                var bytes = new Uint8Array(arrayBuffer);
                var i, length, out = '';
                for (i = 0, length = bytes.length; i < length; i += 1) {
                    out += String.fromCharCode(bytes[i]);
                }
                var base64 = btoa(out);
                //Create FileCreationInformation object using the read file data  
                var createInfo = new SP.FileCreationInformation();
                createInfo.set_content(base64);
                createInfo.set_url(fileName);
    
                //Add the file to the library  
                var uploadedDocument = oList.get_rootFolder().get_files().add(createInfo)
                //Load client context and execcute the batch  
                clientContext.load(uploadedDocument);
                clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
            }
    
            function QuerySuccess() {
                console.log('File Uploaded Successfully.');
                alert("File Uploaded Successfully.");
            }
    
            function QueryFailure(sender, args) {
                console.log('Request failed with error message - ' + args.get_message() + ' . Stack Trace - ' + args.get_stackTrace());
                alert("Request failed with error message - " + args.get_message() + " . Stack Trace - " + args.get_stackTrace());
            }
        </script>
    </head>
    <body>
        <input id="getFile" type="file" />
        <br /> 
        <input id="addFileButton" type="button" value="Upload" />
    </body>
    <html>

    Below is the test:

    Best Regards,

    Baker Kong


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click  here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, November 14, 2019 6:41 AM
  • You not get understand my scenario, i dont want to upload attachment, i want to capture image from camera (Phone and laptop cam) and after capture it save data in SharePoint list

    Shiv Sharma

    Friday, November 15, 2019 4:22 AM
  • Hi SharePoint User02,

    SharePoint does not provide such functionality to capture image using camera. you may need to call the interface of the device camera by means of 3rd development kit. Thanks for your understanding!

    Best Regards,

    Baker Kong


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click  here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Friday, November 15, 2019 9:28 AM