Power Platform Community Forum Thread Details

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:

Building 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

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! 😊