Skip to main content

Notifications

Power Apps - Building Power Apps
Suggested answer

Uploading Images to a SharePoint list from Power apps

Like (2) ShareShare
ReportReport
Posted on 30 Jan 2025 04:22:59 by 2
I'm trying to upload images to a SharePoint list. it worked once but wont work again no matter what I do. how do I make this upload images all the time? Any help would be appreciated!
 
Camera1.OnSelect=
 
Submit.OnSelect=
Categories:
  • Suggested answer
    VASANTH KUMAR BALMADI Profile Picture
    VASANTH KUMAR BALMADI 246 on 30 Jan 2025 at 06:07:05
    Uploading Images to a SharePoint list from Power apps
    Using JavaScript/SPFx (Custom Code Solution)**
    If you're building a custom solution using **SharePoint Framework (SPFx)** or plain JavaScript, you can use the following approach:
    #### Steps:
    1. **Set Up the HTML**:
       - Add a `<video>` element for the camera preview, a `<canvas>` element to capture the image, and a button to trigger the upload.
       ```html
       <video id="cameraPreview" autoplay></video>
       <canvas id="canvas" style="display:none;"></canvas>
       <button id="captureButton">Capture and Upload</button>
       ```
    2. **Access the Camera**:
       - Use the `getUserMedia` API to access the camera.
       ```javascript
       const video = document.getElementById('cameraPreview');
       const canvas = document.getElementById('canvas');
       const captureButton = document.getElementById('captureButton');
       navigator.mediaDevices.getUserMedia({ video: true })
           .then((stream) => {
               video.srcObject = stream;
           })
           .catch((error) => {
               console.error('Error accessing the camera:', error);
           });
       ```
    3. **Capture the Image**:
       - Use the `<canvas>` element to capture a frame from the video stream.
       ```javascript
       captureButton.addEventListener('click', () => {
           const context = canvas.getContext('2d');
           canvas.width = video.videoWidth;
           canvas.height = video.videoHeight;
           context.drawImage(video, 0, 0, canvas.width, canvas.height);
           // Convert the canvas image to a Blob
           canvas.toBlob((blob) => {
               uploadImageToSharePoint(blob);
           }, 'image/jpeg');
       });
       ```
    4. **Upload to SharePoint**:
       - Use the SharePoint REST API or Microsoft Graph API to upload the image.
       ```javascript
       function uploadImageToSharePoint(blob) {
           const fileName = `image_${Date.now()}.jpg`;
           const libraryName = 'Documents'; // Replace with your library name
           const folderPath = 'Shared Documents'; // Replace with your folder path
           const fileReader = new FileReader();
           fileReader.onload = function () {
               const arrayBuffer = this.result;
               const url = `https://your-sharepoint-site.sharepoint.com/_api/web/getfolderbyserverrelativeurl('${libraryName}/${folderPath}')/files/add(overwrite=true,url='${fileName}')`;
               fetch(url, {
                   method: 'POST',
                   headers: {
                       'Accept': 'application/json;odata=verbose',
                       'X-RequestDigest': document.getElementById('__REQUESTDIGEST').value,
                   },
                   body: arrayBuffer,
               })
               .then(response => response.json())
               .then(data => {
                   console.log('File uploaded successfully:', data);
               })
               .catch(error => {
                   console.error('Error uploading file:', error);
               });
           };
           fileReader.readAsArrayBuffer(blob);
       }
       ```
    5. **Deploy the Solution**:
       - If using SPFx, bundle and deploy the solution to your SharePoint site.
       - If using plain JavaScript, add the script to a SharePoint page using a Script Editor or Modern Script Editor web part.
    ---
    ### **Key Notes**:
    - **Permissions**: Ensure the user has the necessary permissions to upload files to the SharePoint library.
    - **Browser Compatibility**: The `getUserMedia` API requires HTTPS and may not work in all browsers.
    - **Error Handling**: Add proper error handling for camera access, file uploads, etc.
    Let me know if you need further clarification or help with this approach! 😊

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Microsoft Kickstarter Events…

Register for Microsoft Kickstarter Events…

Announcing Our 2025 Season 1 Super Users!

A new season of Super Users has arrived, and we are so grateful for the daily…

Announcing Forum Attachment Improvements!

We're excited to announce that attachments for replies in forums and improved…

Leaderboard

#1
WarrenBelz Profile Picture

WarrenBelz 145,666

#2
RandyHayes Profile Picture

RandyHayes 76,287

#3
Pstork1 Profile Picture

Pstork1 64,996

Leaderboard
Loading started