- A content-type of multipart/form-data indicates that in the request body, each piece of data (form field, file upload, etc) contains its own section
- The boundary is a unique delimiter (example: ------WebKitFormBoundaryECOAm72ObCFGjWIt) that separates different sections in the request body
- When the server processes the request, it uses the boundary (which is provided in the request header content-type) to split the request body into sections
- Example Header:
content-type: multipart/form-data; boundary=----WebKitFormBoundaryECOAm72ObCFGjWIt - Example Body
------WebKitFormBoundaryECOAm72ObCFGjWIt Content-Disposition: form-data; name="image"; filename="image.jpg" Content-Type: image/jpeg <binary content of image.jpg> ------WebKitFormBoundaryECOAm72ObCFGjWIt Content-Disposition: form-data; name="customerId" 123456 ------WebKitFormBoundaryECOAm72ObCFGjWIt--
- In bash run
cd react && npm run dev- If this is your first time running, in the
reactfolder:- In bash run
nvm use 22 - Add & populate the
.env.developmentand.env.productionfile
- In bash run
- If this is your first time running, in the
- In bash run
cd csharp && dotnet run- If this is your first time running, in the
csharpfolder, in bash rundotnet add package Microsoft.AspNetCore.WebUtilities && dotnet add package SkiaSharp
- If this is your first time running, in the
- In bash run
cd react && npm run buildso that adistfolder is created and populated - Upload the the
jsandcssfiles inreact/dist/assetsto the demo server - Navigate to the aspx page that will hold the image upload component
- Wherever you'd love the image upload component to function add this:
<div id="image-upload"></div> - In the
<head>add a<link>tag for the dist css file- Example:
<link rel="stylesheet" href="image-upload.css">
- Example:
- Just below the newly added
<link>tag add a<script>tag for the dist js file- Example:
<script src="image-upload.js" type="module"></script>
- Example:
- Ensure the tag has
type="module"so:- The browser continues parsing the HTML content while fetching and processing the module script
- The script is executed only after the document's body has been fully parsed
- Variables, functions, and classes declared in a module are scoped to that module and do not pollute the global namespace
- Module scripts are automatically executed in strict mode, which enforces stricter parsing and error handling of JavaScript code
- Supports ES6 module syntax like
import&export