Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
What HTML5 File.slice method actually doing?
The HTML5 Blob.slice() method creates a new Blob object containing a subset of data from the source Blob. It's particularly useful for processing large files in chunks or extracting specific portions of binary data.
Syntax
blob.slice(start, end, contentType)
Parameters
The slice() method accepts three optional parameters:
- start - Starting byte position (default: 0)
- end - Ending byte position (default: blob.size)
- contentType - MIME type for the new blob (default: empty string)
Basic Example
<!DOCTYPE html>
<html>
<body>
<script>
// Create a blob with text content
var originalBlob = new Blob(['Hello World! This is a test.'], {type: 'text/plain'});
// Slice from byte 0 to 5 (gets "Hello")
var slicedBlob = originalBlob.slice(0, 5);
console.log('Original blob size:', originalBlob.size);
console.log('Sliced blob size:', slicedBlob.size);
// Read the sliced content
var reader = new FileReader();
reader.onload = function(e) {
console.log('Sliced content:', e.target.result);
};
reader.readAsText(slicedBlob);
</script>
</body>
</html>
Original blob size: 26 Sliced blob size: 5 Sliced content: Hello
Chunking Large Files
The slice() method is commonly used to process large files in smaller chunks:
<!DOCTYPE html>
<html>
<body>
<input type="file" id="fileInput">
<div id="output"></div>
<script>
document.getElementById('fileInput').addEventListener('change', function(e) {
var file = e.target.files[0];
if (file) {
var chunkSize = 1024; // 1KB chunks
var chunks = Math.ceil(file.size / chunkSize);
console.log('File size:', file.size + ' bytes');
console.log('Number of chunks:', chunks);
// Process first 3 chunks as example
for (let i = 0; i < Math.min(3, chunks); i++) {
var start = i * chunkSize;
var end = Math.min(start + chunkSize, file.size);
var chunk = file.slice(start, end);
console.log('Chunk ' + (i + 1) + ' size:', chunk.size + ' bytes');
}
}
});
</script>
</body>
</html>
Sending Sliced Data to Server
Here's how to send binary data using slice() with XMLHttpRequest:
<!DOCTYPE html>
<html>
<body>
<script>
// Create sample data
var originalBlob = new Blob(['This is sample data for server upload'], {type: 'text/plain'});
// Slice a portion of the data
var dataChunk = originalBlob.slice(0, 15);
// Prepare XMLHttpRequest
var xhr = new XMLHttpRequest();
xhr.open("POST", "/upload-endpoint", true);
xhr.onload = function(event) {
if (xhr.status === 200) {
console.log('Upload successful');
} else {
console.log('Upload failed');
}
};
// Send the sliced blob
console.log('Sending data chunk of size:', dataChunk.size + ' bytes');
// xhr.send(dataChunk); // Uncomment when server endpoint is available
</script>
</body>
</html>
Sending data chunk of size: 15 bytes
Key Points
- The original blob remains unchanged -
slice()creates a new blob - Negative indices are supported (counted from the end)
- If start is greater than blob.size, an empty blob is returned
- Perfect for implementing file upload progress and chunked transfers
Conclusion
The Blob.slice() method is essential for handling large files efficiently by breaking them into manageable chunks. It enables progressive file uploads, memory-efficient processing, and precise data extraction from binary content.
Updated on: 2026-03-15T23:18:59+05:30
300 Views
Advertisements